<template>
  <div class="header_com">
     <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item,index) in breadList" :key="index" :to="{ path:item.path}">{{item.title}}</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- <div class="demo-type">
          <ul>
            <li>
              <el-dropdown :hide-on-click="false"  @command="handleCommand">
                <span class="el-dropdown-link">
                  欢迎，{{accountInfo.account}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">个人中心</el-dropdown-item>
                  <el-dropdown-item  command="2">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
            <li>
              <div>
                <el-avatar
                  :src="accountInfo.imgUrl"
                ></el-avatar>
              </div>
            </li>
          </ul>
        </div> -->
  </div>
</template>

<script>
export default {
    data(){
        return{
breadList: [],
        }
    },
      mounted(){
        //   this.getPersonal();
        //   this.$bus.$on("sendHeader",this.setHead)
        },
    methods:{
        // 点击菜单项时触发的方法
        // handleCommand(c){
        //     if(c==2){
        //       // this.$local.remove("sell_token");
        //       // this.$local.remove("sell_role");
        //       // this.$local.remove("accountInfo");
        //       // this.$router.replace("login")
        //     }
        //     console.log(c);
        // },
    },
      // 监听器
        watch: {
          $route:{
            deep:true,//深度监听
            immediate: true,
            handler(){
              let arr=[];
              this.$route.matched.forEach((item)=>{
                if(item.meta.title && item.meta.title!="首页"){
                arr.push({path:item.path,title:item.meta.title})
                }
              })
              this.breadList=arr;
              
            }
          }
        }
};
</script>

<style lang="less" scoped>
.header_com {
  display: flex;
  margin-top: 10px;
  align-items: center;
  height: 100%;
  justify-content: space-between;

}
</style>